<!--
 * @description: 外出打卡设置
 * @Author: Coder
 * @Date: 2019-12-19 09:42:02
 * @LastEditors  : Coder
 -->
<template>
  <div>
    <!-- 子路由header -->
    <header class="flex space_between">
      <div class="l_title">
        外出打卡设置
      </div>
      <a-button @click="save">保存</a-button>
    </header>
    <!-- 子路由内容 -->
    <a-layout-content class="a_layout_content">
      <a-form class="lab_l">
        <a-form-item label="汇总提醒时间" class="ta-left" :label-col="{ span: 3 }" :wrapper-col="{ span: 12 }">
          <a-row>
            <a-time-picker :value="moment(`${obj.collectStartTime}`, 'HH:mm')" format="HH:mm" @change="onChangeTimeStart"/>-
            <span class="mg_r10"/>
            <a-time-picker :value="moment(`${obj.collectEndTime}`, 'HH:mm')" h-h:mm- format="HH:mm" @change="onChangeTimeEnd"
          /></a-row>
          <a-row class="sub_text mg_t10">
            收到前日向自己汇报的人的外出打卡汇总
          </a-row>
        </a-form-item>
        <a-form-item label="拍照打卡" :label-col="{ span: 3 }">
          <a-checkbox v-model="obj.isTakePhoto" class="sub_text" @change="onChange">员工打卡时必须拍照</a-checkbox>
        </a-form-item>
        <a-form-item label="备注图片" :label-col="{ span: 3 }">
          <a-checkbox v-model="obj.isAllowLocationPhoto" :disabled="obj.isTakePhoto" class="sub_text"
            >备注不允许上传本地图片,只能拍照</a-checkbox
          >
        </a-form-item>
      </a-form>
    </a-layout-content>
  </div>
</template>

<script>
import { Check, CheckOutset } from "@/api/check";
export default {
  name: "CheckOutsideDetail",

  data() {
    return {
      obj: {
        id: "",
        collectStartTime: "00:00",
        collectEndTime: "00:00",
        isAllowLocationPhoto: false,
        isTakePhoto: false
      }
    };
  },

  created() {
    this.getId();
  },

  methods: {
    /* 获取 */
    getId() {
      Check({
        url: CheckOutset.getCheckOutset + `/${this.$store.state.hr.companyId}`
      }).then(({ data }) => {
        if (data) {
          /* 转格式 */
          data.isAllowLocationPhoto = Boolean(data.isAllowLocationPhoto);
          data.isTakePhoto = Boolean(data.isTakePhoto);
          /* 转格式 */
          this.obj = data;
        }
      });
    },
    /* 保存 */
    save() {
      if (this.obj.id) {
        /* put */
        this.obj.companyId = this.$store.state.hr.companyId;
        Check({
          url: CheckOutset.putCheckOutset,
          data: this.obj,
          method: "PUT"
        }).then(data => {
          if (data.success) {
            this.$notification["success"]({
              message: "成功",
              description: "修改成功"
            });
          }
        });
      } else {
        /* post */
        this.obj.companyId = this.$store.state.hr.companyId;
        Check({
          url: CheckOutset.postCheckOutset,
          data: this.obj,
          method: "POST"
        }).then(data => {
          if (data.success) {
            this.$notification["success"]({
              message: "成功",
              description: "新增成功"
            });
          }
        });
      }
    },
    /*  */
    onChange(e) {
      if (e.target.checked) {
        this.obj.isAllowLocationPhoto = true;
      }
    },
    /* 开始时间 */
    onChangeTimeStart(time, timeString) {
      this.obj.collectStartTime = timeString || "00:00";
    },
    /* 结束时间 */
    onChangeTimeEnd(time, timeString) {
      this.obj.collectEndTime = timeString || "00:00";
    }
  }
};
</script>
<style lang="scss" scoped>
.sub_text {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(37, 37, 37, 1);
  line-height: 20px;
}
</style>
